<template>
  <view class="categorize">
    <view class="categorize-top">
      <my-searchbar
        v-model="query.search"
        placeholder="搜索商品名称/条形码"
        @search="fetchBrandList"
      ></my-searchbar>
    </view>
    <view class="categorize-content">
      <my-category
        :height="104"
        :list="categoryList"
        v-model="current"
        @detail="toCategoryDetail"
      >
        <template v-if="list.length">
          <view class="brand-list">
            <view
              class="brand-item"
              v-for="(item, index) in list"
              :key="index"
              @click="toBrandGoodsList(item)"
            >
              <view style="width: 80px; height: 80px">
                <up-image
                  :src="item.image_url"
                  width="80px"
                  height="80px"
                  lazy-load
                ></up-image>
              </view>
              <u-gap height="10"></u-gap>
              <u-text :text="item.name" align="center"></u-text>
            </view>
          </view>
        </template>
        <template v-else>
          <my-empty></my-empty>
        </template>
      </my-category>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { categories } from "@/common/apis/goods.js";
import { brandList } from "@/common/apis/brand.js";
import { onReady, onShow } from "@dcloudio/uni-app";

const query = reactive({
  search: "",
  categories: "",
});

const categoryHeight = ref(600);

const categoryList = ref([]);

const list = ref([]);

// 当前分类索引
const current = ref(0);

watch(
  () => current.value,
  (newVal) => {
    const data = categoryList.value[newVal];
    if (data) {
      query.categories = data.id;
      fetchBrandList();
    }
  }
);

// 获取商品分类列表
async function fetchCategories() {
  const response = await categories({
    all: "1",
  });
  if (response) {
    categoryList.value = response;
    if (categoryList.value.length) {
      query.categories = categoryList.value[0].id;
    }
  }
}

// 品牌列表
async function fetchBrandList() {
  const response = await brandList(query);
  if (response) {
    list.value = response;
  }
  return response;
}

function toBrandGoodsList(brand) {
  console.log(brand);
  uni.$u.route({
    url: "/pages/goods/list",
    params: {
      type: "brand",
      brandId: brand.id,
      brandName: brand.name,
    },
  });
}

// 前往该分类商品详情
function toCategoryDetail(data) {
  console.log(data);
}

onReady(async () => {
  await fetchCategories();
  await fetchBrandList();
  uni.getSystemInfo({
    success: (res) => {
      categoryHeight.value = res.windowHeight - 60;
    },
  });
});
</script>

<style lang="scss" scoped>
.categorize {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;

  .categorize-top {
    height: 104rpx;
    padding: 20rpx 20rpx 0;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f0f0f0;
    box-sizing: border-box;
  }
  .categorize-content {
    height: calc(100vh - 104rpx);
    overflow: hidden;
  }
}

.brand-list {
  display: flex;
  flex-wrap: wrap;

  .brand-item {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
  }
}
</style>
